let ctx = null;
let canvas = null;
let isDrawing = false;
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
let originData = []
export default {
  data() {
    return {
      lineData: [],
    };
  },
  mounted() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
  },
  watch:{
    arrowValue:{
      handler(val) {
        if(val && ctx) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          // 切换箭头
          const startX = this.lineData[0].x;
          const startY = this.lineData[0].y;
          const endX = this.lineData[1].x;
          const endY = this.lineData[1].y;
          this.draw_line(startX, startY, endX, endY);
        }
      }
    }
  },
  methods: {
    initLine() {
      canvas = document.getElementById("myCanvas");
      ctx = canvas.getContext("2d");
      this._drawType = "line";
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      canvas.addEventListener("mousedown", this.line_onMousedown);
      canvas.addEventListener("mousemove", this.line_onMousemove);
      canvas.addEventListener("mouseup", this.line_onMouseup);
      canvas.addEventListener("mouseleave", this.line_onMouseleave);
    },
    getLines() {
      return this.lineData;
    },
    // 取消绘制,此时将线段重置为用户之前绘制的线段
    cancelLine() {
      if(!ctx) return;
      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      this.line_removeEvent();
      this.lineData = [...originData];
      this.line_draw()
      this.polygon_draw()
    },
    // 开始绘制
    line_onMousedown(e) {
      startX = e.offsetX;
      startY = e.offsetY;
      isDrawing = true;
    },
    // 绘制过程
    line_onMousemove(e) {
      if (isDrawing) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        endX = e.offsetX;
        endY = e.offsetY;
        this.draw_line(startX, startY, endX, endY);
      }
    },
    // 用户编辑时回显线段
    line_draw(flag) {
      if (this.lineData.length !== 2) return;
      canvas = document.getElementById('myCanvas');
      ctx = canvas.getContext('2d');
      flag &&  (originData = [...this.lineData])
      const startX = this.lineData[0].x;
      const startY = this.lineData[0].y;
      const endX = this.lineData[1].x;
      const endY = this.lineData[1].y;
      this.draw_line(startX, startY, endX, endY);
    },
    // 绘制线段核心代码
    draw_line(startX, startY, endX, endY) {
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle="blue"
      ctx.moveTo(startX, startY);
      ctx.lineTo(endX, endY);
      ctx.stroke();
      ctx.restore()
      this.arrowValue && this.draw_arrow(startX, startY, endX, endY)
    },
    // 绘制箭头虚线
    draw_arrow(startX, startY, endX, endY) {
      var direction = this.arrowValue;
      const midX = (startX + endX) / 2;
      const midY = (startY + endY) / 2;
      const length = 50; // length of the perpendicular line
      const angle = Math.atan2(endY - startY, endX - startX) + Math.PI / 2;
      const perpStartX = midX + length * Math.cos(angle);
      const perpStartY = midY + length * Math.sin(angle);
      const perpEndX = midX - length * Math.cos(angle);
      const perpEndY = midY - length * Math.sin(angle);
      ctx.save();
      ctx.setLineDash([5, 5]);
      ctx.strokeStyle = 'red'
      ctx.beginPath();
      ctx.moveTo(perpStartX, perpStartY);
      ctx.lineTo(perpEndX, perpEndY);
      ctx.stroke();
      ctx.restore()
      // Reset line dash
      ctx.setLineDash([]);
      if (direction === 2 || direction === 3) {
        this.drawArrowhead(ctx, perpEndX, perpEndY, angle + Math.PI / 2);
      }
      if (direction === 1 || direction === 3) {
        this.drawArrowhead(ctx, perpStartX, perpStartY, angle - Math.PI / 2);
      }
      ctx.fillStyle = "orange";
      ctx.font = "20px Arial";
      ctx.fillText("B", perpStartX - 10, perpStartY - 10);
      // Draw the text "B" at the bottom of the vertical line
      ctx.fillStyle = "orange";
      ctx.fillText("A", perpEndX - 10, perpEndY + 30);
    },
    // 绘制箭头
    drawArrowhead(ctx, x, y, radians) {
      ctx.save();
      ctx.strokeStyle = 'red'
      ctx.beginPath();
      ctx.translate(x, y);
      ctx.rotate(radians);
      ctx.moveTo(-5, -15);
      ctx.lineTo(0, 0);
      ctx.lineTo(5, -15);
      ctx.stroke();
      ctx.restore();
    },
    // 结束绘制
    line_onMouseup(e) {
      isDrawing = false;
      this.lineData = [{
          x: startX,
          y: startY
        },
        {
          x: endX,
          y: endY
        },
      ];
      this.line_drawEnd && this.line_drawEnd()
      this.line_removeEvent();
      this.polygon_draw && this.polygon_draw();
      this.rect_draw && this.rect_draw();
    },
    // 鼠标超出绘制区域也结束绘制
    line_onMouseleave(e) {
      isDrawing = false;
      this.lineData = [{
          x: startX,
          y: startY
        },
        {
          x: endX,
          y: endY
        },
      ];
      this.line_drawEnd && this.line_drawEnd()
      this.polygon_draw();
      this.rect_draw();
      this.line_removeEvent();
    },
    line_removeEvent() {
      canvas.removeEventListener("mousedown", this.line_onMousedown);
      canvas.removeEventListener("mousemove", this.line_onMousemove);
      canvas.removeEventListener("mouseup", this.line_onMouseup);
      canvas.removeEventListener("mouseleave", this.line_onMouseleave);
    },
  },
};